//定义列表中所有事件为数组
var myNodelist=document.getElementsByTagName("li")
//处理任务完成事件
var list=document.querySelector("ul")
console.log(list)
list.addEventListener('click',function (ev){
  if (ev.target.tagName === 'LI'){
    if(ev.target.classList.contains("check")){
      var things=ev.target.firstChild.value
      localStorage.setItem(things,'unfinished')
    }
    else{
      var things=ev.target.firstChild.value
      localStorage.setItem(things,'finished')
    }
    ev.target.classList.toggle('check')
  }
},false);
//处理点击add按钮，列表中添加一个待办事项
function addElement(){
  var things=document.getElementById('things').value
  var li=document.createElement('li')
  var t=document.createTextNode(things)
  if (things == ''){
    alert("请输入待办事件")
  }
  else{
    localStorage.setItem(things,'unfinished')
    list.appendChild(li)
    var neirong=document.createElement('input')
    li.appendChild(neirong)
    neirong.type="text"
    neirong.className='imf'
    neirong.setAttribute("value",things)
    var span=document.createElement('span')
    var txt=document.createTextNode('\u00D7')
    span.className='close'
    span.appendChild(txt)
    li.appendChild(span)
    var close=document.getElementsByClassName("close")
    for (var i=0;i<close.length;i++){
        close[i].onclick=function () {
          var dethings=this.parentElement.firstChild.value
          console.log(dethings)
          localStorage.removeItem(dethings)
          var div=this.parentElement
          div.parentElement.removeChild(div)
        }
      }
  }
  //清空输入栏
  document.getElementById('things').value=''
}
//选择事项
//显示需要办的待办事项
function daiban(){
  for (var i=0;i<myNodelist.length;i++){
    if(myNodelist[i].classList.contains("check")){
      myNodelist[i].style.display="none"
    }
    else{
      myNodelist[i].style.display="block"
    }
  }
}
//显示已经完成的待办事项
function wancheng(){
  for (var i=0;i<myNodelist.length;i++){
    if(myNodelist[i].classList.contains("check")){
      myNodelist[i].style.display="block"
    }
    else{
      myNodelist[i].style.display="none"
    }
  }
}
//显示所有待办事项
function allsx(){
  for (var i=0;i<myNodelist.length;i++){
    myNodelist[i].style.display="block"
  }  
}
//页面初始化
window.onload=function(){
  //读取本地文件
  for(var i=0;i<localStorage.length;i++){
    var things=localStorage.key(i)
    var li=document.createElement('li')
    var t=document.createTextNode(things)
    var span=document.createElement('span')
    list.appendChild(li)
    var neirong=document.createElement('input')
    li.appendChild(neirong)
    neirong.type="text"
    neirong.className='imf'
    neirong.setAttribute("value",things)
    var txt=document.createTextNode('\u00D7')
    span.className='close'
    span.appendChild(txt)
    li.appendChild(span)
    var finish=localStorage.getItem(things)
    if(finish=='finished')li.classList.add("check");
  }
  //加载更改
  var imf=document.getElementsByClassName("imf")
  for (var i=0;i<imf.length;i++){
    imf[i].onfocus=function (){
      var bethings=this.value
      console.log(bethings)
      this.onblur=function (){
        var afthings=this.value
        var finish=localStorage.getItem(bethings)
        localStorage.removeItem(bethings)
        localStorage.setItem(afthings,finish)
      }
    }
  }
  //加载删除
  var close=document.getElementsByClassName("close")
  for (var i=0;i<close.length;i++){
    close[i].onclick=function (){
      var dethings=this.parentElement.firstChild.value
      console.log(dethings)
      localStorage.removeItem(dethings)
      var div=this.parentElement
      div.parentElement.removeChild(div)
    }
  }
}
//处理清空事件
function clearLove(){
  var _clear=confirm("是否确定清空吗")
  if(_clear){
    localStorage.clear()
    var clearall=document.getElementById('middle').querySelector("ul")
    var _first=clearall.firstElementChild
    while(_first){
      _first.remove()
      _first=clearall.firstElementChild
    }
  }
}
//查询显示
function chaxun(){
  var sb=document.getElementById('things2').value
  for(var i=0;i<myNodelist.length;i++){
    if(myNodelist[i].firstChild.value.indexOf(sb) != -1){
      myNodelist[i].style.display="block"
    }
    else{
      myNodelist[i].style.display="none"
      console.log(sb)
    }
  }
  //清空输入栏
  document.getElementById('things2').value=''
}